<template>
  <el-card class="navbar">
      <el-card class ="logo"></el-card>
      <el-card class="navbar-menu">
        <div  class="nav-div">
          <div><router-link class="nav-router" to="/">首页</router-link></div>
          <div><router-link class="nav-router" to="">导览</router-link></div>
          <div><router-link class="nav-router" to="">活动</router-link></div>
          <div><router-link class="nav-router" to="">文化传承</router-link></div>
          <div><router-link class="nav-router" to="">探索历史</router-link></div>
          <div><router-link class="nav-router" to="">联系我们</router-link></div>
          <div v-if="isLogin" class="personal" @mouseover="showInfo" @mouseleave="hideInfo">
            <span class="personal-box">
              <div>
                <img v-if="profilePhotoUrl" :src="profilePhotoUrl" class="profilePhotoImg">
                <i v-else class="default-profilePhotoImg" />
                <Personal v-show="isShow"/>
              </div>
            </span>
          </div>
          <div v-else>
            <router-link class="nav-router" to="/login">登录</router-link>
          </div>
        </div>
      </el-card>
    </el-card>
</template>

<script>
import storage from '@/utils/common/storage'
import Personal from '@/pages/index/header/personal/personal'
const { downloadUrl } = require('@/script/util')

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Header',
  components: {
    Personal
  },
  data () {
    return {
      isLogin: this.$store.state.user ? true : (!!storage.get('user')),
      isShow: false,
      profilePhotoUrl: storage.get('user') ? (storage.get('user').image ? downloadUrl + JSON.parse(storage.get('user')).image : '') : ''
    }
  },
  methods: {
    // 当触发mouseleave时调用的方法
    hideInfo () {
      setTimeout(() => {
        this.isShow = false
      }, 500)
    },
    // 当触发mouseover时调用的方法
    showInfo () {
      this.isShow = true
    }
  }
}

</script>

<style scoped lang="less">
@import "Header.less";
</style>
